<template>
	<el-container>
		<div v-show="screenVisible" class="table-screen-column">
			<el-form label-width="auto" label-position="right">
				<el-row :gutter="20">
					<el-col :span="4">
						<el-form-item label="状态">
							<el-select v-model="search.status" clearable placeholder="状态搜索" style="width: 100%;">
								<el-option v-for="item in statusLabel" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="认证">
							<el-select v-model="search.manager_type" clearable placeholder="认证" style="width: 100%;">
								<el-option v-for="item in attestationLabel" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-plus" type="primary" plain v-auth="['manager:users:add']"
					@click="add">新增</el-button>
				<!-- 
                <el-button type="danger" v-auth="['manager:users:add']" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button> 
                -->
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.nickname" placeholder="昵称搜索" clearable></el-input>
					<el-input v-model="search.mobile" placeholder="手机号搜索" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" plain @click="handleQuery"></el-button>
					<el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button>
					<el-button type="primary" link @click="screenVisible = !screenVisible">
						{{ screenVisible ? '关闭更多筛选' : '显示更多筛选' }}
						<el-icon><el-icon-arrow-down v-if="screenVisible" /><el-icon-arrow-up v-else /></el-icon>
					</el-button>
				</div>
			</div>
		</el-header>

		<el-main class="nopadding">
			<el-table ref="table" v-loading="loading" :data="tableList" border @selection-change="selectionChange">
				<el-table-column label="#" prop="id" width="100"></el-table-column>
				<el-table-column label="头像/昵称/手机号" prop="nickname" align="left" width="300">
					<template #default="scope">
						<div class="member-base">
							<div class="m-avatar">
								<el-avatar :size="60" src="#" @error="errorHandler">
									<img :src="scope.row.avatar" />
								</el-avatar>
							</div>
							<div class="m-base">
								<p>昵称: {{ scope.row.nickname }}</p>
								<p>手机号: {{ scope.row.mobile }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="余额/积分" prop="mobile">
					<template #default="scope">
						<div class="m-base">
							<p>余额: {{ scope.row.info.balance }}</p>
							<p>积分: {{ scope.row.info.integral }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
						<el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="认证" prop="attestation">
					<template #default="scope">
						{{ getLableText(scope.row.attestation, attestationLabel) }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="created_at" width="180"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="170">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
								@click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small"
								@click="table_edit(scope.row, scope.$index)">编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<sc-page v-model="search"></sc-page>
		</el-footer>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false"></save-dialog>
</template>

<script>
import saveDialog from './save'

export default {
	name: 'memberList',
	components: {
		saveDialog,
	},
	data() {
		return {
			dialog: {
				save: false
			},
			url: process.env.VUE_APP_FILES_URL,
			loading: true,
			screenVisible: false,
			tableList: [],
			selection: [],
			search: {
				page: 1,
				pageSize: 20,
				total: 0,
				paging: 0,
				nickname: undefined,
				name: undefined,
				mobile: undefined,
				status: undefined,
				region_attestation: undefined,
			},
			statusLabel: [
				{ value: 0, label: '禁用' },
				{ value: 1, label: '正常' },
			],
			attestationLabel: [
				{ value: 0, label: '未认证' },
				{ value: 1, label: '已认证' },
			],
		}
	},
	mounted() {
		this.handleQuery()
	},
	watch: {
        "search.paging": function() {
			this.handleQuery()
		},
	},
	methods: {
		//获取列表
		async getTableList() {
			this.loading = true
			var res = await this.$API.member.member.list.get(this.search)
			this.loading = false
			if (res.code == 200) {
				this.tableList = res.data.rows
				this.search.total = res.data.total
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//搜索
		handleQuery() {
			this.getTableList()
		},
		//重置搜索
		resetQuery() {
			this.search = {
				nickname: undefined,
				mobile: undefined,
				status: undefined,
				is_manager: undefined,
				housing_starter: undefined,
			}
			this.handleQuery()
		},
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add', this.search)
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit', this.search).setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
		//删除
		async table_del(row) {
			var reqData = { id: row.id }
			var res = await this.$API.agent.users.delete.post(reqData);
			if (res.code == 200) {
				this.handleQuery()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//批量删除
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading();
				this.handleQuery()
				loading.close();
				this.$message.success("操作成功")
			}).catch(() => {
				this.$message.error("操作失败")
			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//本地更新数据
		handleSaveSuccess(mode, search) {
			if (mode != 'show') {
				this.search = search
				this.handleQuery()
			}
		},
		getLableText(val, lableArr) {
			var txt = ''
			lableArr.forEach(function (item) {
				if (item.value == val) {
					txt = item.label
				}
			})
			return txt
		}
	}
}
</script>

<style>
/** row **/
.el-row {
	margin-bottom: 20px;
}

.el-row:last-child {
	margin-bottom: 0;
}

.el-col {
	border-radius: 4px;
}

.bg-purple-dark {
	background: #99a9bf;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}

/** 会员基础信息 **/
.member-base {
	display: flex;
	width: 100%;
}

.member-base .m-avatar {
	width: 60px;
}

.member-base .m-base {
	padding: 6px 10px;
}
</style>
